<!DOCTYPE html>
<html>
<head>
    <title>Coaxial Waveguide Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="350"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style and Font settings
    ctx.lineWidth = 2.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = 'bold 20px serif';

    // Parameters for the drawing
    const centerY = 150;
    const centerX = 300;
    const length = 350;
    const r1 = 30; // Inner radius
    const r2 = 60; // Outer radius
    const perspectiveRx = 25; // Horizontal radius for ellipse perspective

    const zStart = centerX - length / 2;
    const zEnd = centerX + length / 2;
    const zBoundary = centerX;

    // Helper function to draw an arrowhead
    function drawArrow(ctx, x, y, angle, size) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, -size / 2);
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, size / 2);
        ctx.stroke();
        ctx.restore();
    }

    // --- Drawing starts here ---

    // 1. Draw the outer cylinder
    ctx.beginPath();
    // Top line
    ctx.moveTo(zStart, centerY - r2);
    ctx.lineTo(zEnd, centerY - r2);
    // Rounded end on the right
    ctx.arc(zEnd, centerY, r2, -Math.PI / 2, Math.PI / 2);
    // Bottom line
    ctx.lineTo(zStart, centerY + r2);
    ctx.stroke();
    // Left opening
    ctx.beginPath();
    ctx.ellipse(zStart, centerY, perspectiveRx, r2, 0, 0, 2 * Math.PI);
    ctx.stroke();

    // 2. Draw the inner cylinder
    ctx.beginPath();
    // Top line
    ctx.moveTo(zStart, centerY - r1);
    ctx.lineTo(zEnd + 1, centerY - r1); // Extend slightly to look solid
    // Bottom line
    ctx.moveTo(zStart, centerY + r1);
    ctx.lineTo(zEnd + 1, centerY + r1);
    ctx.stroke();
    // Left opening
    ctx.beginPath();
    ctx.ellipse(zStart, centerY, perspectiveRx * (r1 / r2), r1, 0, 0, 2 * Math.PI);
    ctx.stroke();

    // 3. Draw the z-axis
    ctx.beginPath();
    ctx.moveTo(zStart - 80, centerY);
    ctx.lineTo(zEnd + 50, centerY);
    ctx.stroke();
    // Arrowhead for z-axis
    drawArrow(ctx, zEnd + 50, centerY, 0, 10);
    // Tick mark at z=0
    ctx.beginPath();
    ctx.moveTo(zBoundary, centerY - 5);
    ctx.lineTo(zBoundary, centerY + 5);
    ctx.stroke();

    // 4. Draw the dashed boundary at z=0
    ctx.save();
    ctx.setLineDash([6, 4]);
    ctx.beginPath();
    ctx.ellipse(zBoundary, centerY, perspectiveRx, r2, 0, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.restore();

    // 5. Add text labels
    ctx.textAlign = 'center';
    ctx.font = 'bold 22px serif';

    // Epsilon labels
    ctx.fillText('ε = 1', zBoundary - length / 4, centerY - 10);
    ctx.fillText('ε > 1', zBoundary + length / 4, centerY - 10);

    // '0' label for the boundary
    ctx.fillText('0', zBoundary, centerY + 30);
    
    // 'z' label for the axis
    ctx.fillText('z', zEnd + 65, centerY + 8);
    
    // Figure caption
    ctx.font = '18px Arial';
    ctx.fillText('Fig. 4.17', centerX, canvas.height - 20);
    
    // 6. Draw radius dimension lines and labels (r1, r2)
    ctx.textAlign = 'left';
    ctx.font = 'italic 20px serif';

    const dimLineX = zStart - 50;
    const labelX = zStart - 85;

    // Draw vertical dimensioning line
    ctx.beginPath();
    ctx.moveTo(dimLineX, centerY - r2 - 10);
    ctx.lineTo(dimLineX, centerY + 10);
    ctx.stroke();

    // Draw T-bars on the dimensioning line
    // T-bar for r2
    ctx.beginPath();
    ctx.moveTo(dimLineX - 5, centerY - r2);
    ctx.lineTo(dimLineX + 5, centerY - r2);
    ctx.stroke();
    // T-bar for r1
    ctx.beginPath();
    ctx.moveTo(dimLineX - 5, centerY - r1);
    ctx.lineTo(dimLineX + 5, centerY - r1);
    ctx.stroke();

    // Thin guide lines from object to dimension line
    ctx.save();
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#333';
    ctx.beginPath();
    ctx.moveTo(dimLineX, centerY - r2);
    ctx.lineTo(zStart, centerY - r2);
    ctx.moveTo(dimLineX, centerY - r1);
    ctx.lineTo(zStart, centerY - r1);
    ctx.stroke();
    ctx.restore();

    // Radius labels
    ctx.fillText('r₁', labelX, centerY - r1 + 8);
    ctx.fillText('r₂', labelX, centerY - r2 + 8);

</script>
</body>
</html>